<script lang="ts" setup>
	import { onBeforeMount, ref } from "vue";
	interface Props {
		id : number;
	}

	const props = defineProps<Props>();

	const list = ref([]);

	onBeforeMount(() => {
		for (let i = 0; i < 20; i++) {
			list.value.push({
				id: i,
				title: "测试标题" + i,
				head_img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
				create: 'linhan',
				content:
					"日常我们会设置背景颜色，输入一些文字，如果我们想要它们变得酷炫一点那么就可以将单色背景变成渐变，让文字具备阴影，让其立体起来。具体效果我们可以利用CSS属性来实现。今天我们就来了解一下颜色渐变跟阴影是如何设置的" +
					i,
				createTime: new Date().toLocaleString(),
				category: ['uniapp'],
				background: i % 2 === 0 ? '' : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3'
			});
		}
	});
</script>

<template>
	<view class="w-full h-auto">
		<view class="w-full h-[340rpx] p-[20rpx] mt-[20rpx] bg-[#fff]" v-for="(i) in list" :key="i.id">
			<view class="title w-full h-[15%] text-[14px] font-bold truncate">
				{{i.title}}
			</view>
			<!-- img -->
			<view class="w-full h-[20%] py-[10rpx] flex items-center">
				<view class="w-[40rpx] h-[40rpx] rounded-full mx-[10rpx] overflow-hidden">
					<image class="w-full h-full " :src="i.head_img" mode=""></image>
				</view>
				<view class="text-[12px] font-medium">
					{{i.create}}
				</view>
			</view>
			<!-- content -->
			<view class="w-full h-[50%] text-[14px] ">
				<view class="flex h-full " v-if="i.background">
					<view class="w-[70%] h-hull ellipsis">
						{{i.content}}
					</view>
					<view class="w-[30%] h-full rounded-[12rpx] overflow-hidden">
						<image class="w-full h-full" :src="i.head_img" mode=""></image>
					</view>
				</view>
				<view v-else="i.background">
					<view class="w-full h-hull ellipsis">
						{{i.content}}
					</view>

				</view>
			</view>
			<!-- bottom -->
			<view class="w-full h-[15%] flex justify-between items-center text-[12px] pt-[6rpx]">
				<view class="">
					{{i.createTime}}
				</view>
				<view class=" flex items-center">
					<u-tag :text="item" type='error' plain size="mini" v-for="(item,index) in i.category"
						:key="index"></u-tag>

				</view>
			</view>
		</view>

	</view>
</template>